<template>
<el-container>
    <el-header>
        <h2>{{ dishDetail.dish_name }}</h2>
    </el-header>

    <el-main>
        <el-row>
            <el-col :span="12" style="height: 600;">
                <el-image :src="imageUrl" fit="contain"></el-image>
            </el-col>

            <el-col :span="12">
            <el-card>
                <h3>菜品信息</h3>
                <p><strong>描述:</strong> {{ dishDetail.description }}</p>
                <p><strong>价格:</strong> {{ dishDetail.price }}</p>
                <p><strong>分类:</strong> {{ dishDetail.dish_category }} </p>
                <p><strong>成分:</strong> {{ dishDetail.ingredient }}</p>
                <p><strong>营养信息:</strong> {{ dishDetail.nutritionInfo }}</p>
                <p><strong>过敏原:</strong> {{ dishDetail.allergen }}</p>

                <h3>价格浮动信息</h3>
                <el-table :data="priceHistory" height="200">
                <el-table-column prop="modify_time" label="时间"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                </el-table>
            </el-card>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
            <el-card>
                <h3>用户评分和评价</h3>
                <el-table :data="reviews" height="300">
                <el-table-column prop="user_ID" label="用户"></el-table-column>
                <el-table-column prop="rating" label="评分">
                    <template #default="scope">
                        <span>{{ scope.row.rating }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="comment" label="评价"></el-table-column>
                </el-table>
            </el-card>
            </el-col>
        </el-row>
    </el-main>
</el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from '@/axios' 

const dishDetail = ref({})
const priceHistory = ref([])
const reviews = ref([])
const imageUrl = ref('') // 存储图片路径

const route = useRoute()
const dishId = route.params.id  // 从路由参数中获取菜品 ID

const fetchDishDetail = async () => {
    try {
        const response = await axios.get(`/api/dish/getDishDetail/${dishId}`)
        dishDetail.value = response.data
        // 动态生成图片路径
        imageUrl.value = `/images/${dishId}${dishDetail.value.dish_name}.jpg`
        console.log(imageUrl.value)
    } catch (error) {
        console.error('获取菜品详情失败', error)
        ElMessage.error('获取菜品详情失败')
    }
}

const fetchPriceHistory = async () => {
    try {
        const response = await axios.get(`/api/dish/getPriceHistory/${dishId}`)
        priceHistory.value = response.data
    } catch (error) {
        console.error('获取价格浮动信息失败', error)
        ElMessage.error('获取价格浮动信息失败')
    }
}

const fetchReviews = async () => {
    try {
        const response = await axios.get(`/api/dish/getReview/${dishId}`)
        reviews.value = response.data
    } catch (error) {
        console.error('获取评价信息失败', error)
        ElMessage.error('获取评价信息失败')
    }
}

onMounted(() => {
    fetchDishDetail()
    fetchPriceHistory()
    fetchReviews()
})
</script>

<style scoped>
.el-image {
width: 100%;
height: 450px;
}

.el-card {
margin-bottom: 20px;
}

.el-rate {
font-size: 16px;
}
</style>
  